<template>
    <div class="page rdsp-fix-botttom-page" data-page="createTrouble" style="z-index: 2;">
            <div class="link-page-nav">
                <a href="#" class="link" @click="$root.backToTab()">
                    <i class="iconfont icon-zuo"></i>
                </a>
            </div>
            <div class="link-page-top" style="padding-bottom: 17px;">
                <div class="link-page-title">驳回</div>
            </div>
        <div class="page-content">
                <div id="keyAlarmPic_{{getNewId}}" style="margin: 10px 20px;"></div>
                <div class="form-hiddenDanger">
                    <div class="rdsp-inner-content">
                        <div class="hiddenDanger-block">
                            <div class="left-title fl"><span class="red">*</span>描述</div>
                            <div class="right-con">
                                <textarea id="troubleText_{{getNewId}}" class="right-con-textarea cancle-ios-write" placeholder="请填写驳回描述"></textarea>
                                <div class="voice">
                                    <div id="tbpass_voice_{{getNewId}}" class="voice-before" @click="openVoice()">
                                        <i class="iconfont icon-yuyin1"></i>点击语音输入
                                    </div>
                                    <div class="voice-after" style="display: none">
                                        <div class="voice-after-time"><i class="iconfont icon-yuyin-copy"></i></div>
                                        <div class="delete"><i class="iconfont icon-icon-shanchu-copy"></i></div>
                                    </div>
                                    <div class="bohui-btn" @click="savaRectification">
                                        <span>驳回</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
        </div>
    </div>
</template>
<style>
    .bohui-btn{
        background: #2196f3;
        color: #fff;
        font-size: 16px;
        text-align: center;
        margin: 30px 16px;
        line-height: 35px;
    }
</style>
<script>
return {
    mounted() {
        var self = this;
        var $ = self.$;
    },
    beforeCreate() {
        var self = this;
        var $ = self.$;

    },
    data: function() {
        return {
            imageArr: [],
            picUrls:'',
            voiceFlag:false,
            status:null,
            getNewId: (new Date()).getTime(),
        }
    },

    methods: {
        //status=1保存不提交    //status=3保存并提交
        savaRectification:function(status) {
            var self = this;
            self.status = status;
            if (self.voiceFlag){
                self.voiceFlag = false;
                native.saveTheVoiceFile(self.$route.params.orgId*1);
            } else {
                if(getClickEnabel(4000)){
                  self.callbackVoiceFile("",0);
                }
            }
        },
        //启动语音
        openVoice:function(){
            var self = this;
            self.voiceFlag = true;
            native.startVoice("troubleText_"+self.getNewId, true);
        },
        //语音输入回调
        voiceCollectionData: function (voiceStr, componentId) {
            var text = $("#" + componentId)[0].value;
            if (!voiceStr || "" === voiceStr.trim()) {
                app.methods.showToastCenter("未能识别您说的语音,请重试。");
            } else {
                $("#" + componentId).val(text + voiceStr);
            }
        },
        //接受原生的语音Url
        callbackVoiceFile:function(voiceUrl,wavLength){
            var self = this;
            var text = $("#troubleText_"+self.getNewId)[0].value;
            if (text == "") {
                app.methods.showToastCenter('请填写整改说明');
                return;
            }
            common.loading(1);
            self.picUrls=self.imageArr.join(",");
            Dao.troubleback({
                userName:userInfor.accountName,
                deviceId:appKeyObj.deviceId,
                orgId:this.$route.params.orgId,
                hiddenDangerId:this.$route.params.hiddenDangerId,
                picUrls:self.picUrls,
                type:2,
                gradeId:this.$route.params.troubleRank,
                categoryId:this.$route.params.categoryId,
                status:1,
                /* createAccount:userInfor.name, */
                createAccount:userInfor.accountName,
                createAccountName:userInfor.name,
                detailDesc:text,
                detailVoiceUrl:voiceUrl,
                detailVoiceLength:wavLength
            },function(data) {
                 common.loading(0);
                 app.methods.showToastCenter('驳回成功');
                 indexHiddenDangerStatus=1;
                 hiddenDangerListStatus=1;
                 common.loading(1);
                 app.router.back();
            });
        },
        tb_cancel:function() {
            app.router.back();
        },
    },
    on: {
        pageInit: function(e, page) {
            var self = this;
            var $ = self.$;
            self.voiceFlag = false;
            hiddenDangerListStatus=1;
            // jQuery(".form-hiddenDanger .rdsp-inner-title").click(function(e) {
            //     jQuery(e.currentTarget).parent().toggleClass("show");
            //     jQuery(e.currentTarget).siblings(".rdsp-inner-content").slideToggle();
            // })
            self.imageArr = [];
            //初始化上传
            upLoadImagesCompt(jQuery("#keyAlarmPic_"+self.getNewId),function(pic,isAdd){
                let _pic = common.addWatermark(pic)
                if(isAdd == "add"){
                    self.imageArr.unshift(_pic);
                }else{
                    let index = self.imageArr.indexOf(_pic);
                    self.imageArr.splice(index,1);
                }
            },true,null,'keyAlarmPic_container_' + self.getNewId,'keyAlarmPic_pick_' + self.getNewId,'添加现场图片',true);
        }
    }
}
</script>

<style scoped>
    .cus {
        height: 100px;
        padding-left: 18px;
        border-bottom: 0px;
    }

    .cus_wup {
        padding-left: 0px;
    }

    .ul_cus {
        padding: 3px;
        position: absolute;
    }

    .up_cus {
        width: 74px;
        height: 73px;
        background: url(./img/home/upload_pic.png);
    }

    .inp_cus {
        width: 79px;
        height: 79px;
    }
     /* #line_width {
        width: 100%;
        height: 95px;
        display: inline;
        white-space: nowrap;
        float: left;
        overflow-y: hidden
    }

    #line_width ul {
        display: inline-flex;
    } */
    .del {
        width: 14px;
        height: 14px;
        right: 0px;
        position: absolute;
        background: url(./img/home/del_pic.png);
    }
    .messagebar-attachments{
        padding: 0px!important;
        padding-left: 18px;
    }
    .voice {
        width: 100%;
        margin-top: 7px;
    }
    .voice .voice-before {
        width: 100%;
        height: 35px;
        line-height: 35px;
        background: rgba(112, 167, 241, 0.2);
        border: solid 0.5px #70a7f1;
        color: #378bf6;
        text-align: center;
    }
    .voice .voice-before i {
        margin-right: 5px;
        font-size: 18px;
    }
    .voice .voice-after {
        width: 100%;
        height: 35px;
        line-height: 35px;
    }
    .voice .voice-after .voice-after-time {
        width: 80%;
        height: 100%;
        color: #fff;
        text-align: left;
        float: left;
        background: #378bf6;
    }
    .voice .voice-after .voice-after-time i {
        font-size: 24px;
        padding-left: 10px;
        margin-top: 6px;
    }
    .voice .voice-after .delete {
        float: right;
        height: 100%;
    }
    .voice .voice-after .delete i {
        color: #999;
        font-size: 24px;
        display: inline-block;
        padding-top: 6px;
    }
</style>
